<template>
</template>

<template>
	<view class="pay_add_container">
		<view class="title">根据你选择的套餐，推荐你增加以下体检内容：</view>
		<checkbox-group @change="checkboxSel">
			<view class="content" v-for="(item,index) in addData" :key="item.phy_id">
				<view class="content_left">
					<label>
						<checkbox v-model="item.phy_id" ></checkbox>
					</label>
					<view class="item">
						<view>{{item.phy_projectName}}</view>
						<view class="money">
							<text>￥{{item.phy_salePrice}}</text>
							<text class="old_price">￥{{item.phy_oldPrice}}</text>
						</view>
					</view>
				</view>
				<view class="content_right">
					<view class="more"> <text class="iconfont icon-gengduo"></text></view>
					<view class="pCount">
						<text>已有<text class="num">{{item.phy_salesNum}}</text>人购买</text>
					</view>
				</view>
			</view>
		</checkbox-group>
		<!-- 底部按钮 -->
		<view class="btn_container">
			<view class="sureBtn" @click="sure"><text>确定</text></view>
		</view>

	</view>
</template>

<script>
	export default {
		onLoad(option) {
			console.log(parseFloat(option.id))
			this.order_id =parseFloat(option.id); //需要一个order_id
			
			
		},
		mounted(){
			this.$http({   //获取体检加项的内容
				url:"/hasPayAdd",
				data:{
					order_id:this.order_id,   //这里需要一个套餐id
				},
			}).then((res)=>{
				this.addData = res.data;
			})
		},
		data(){
			return{
				//体检加项的内容
				addData:[],		
				//选中的加项
				selectData:[],
				//已体检过来的加项
				order_id:'',
			}
		},
		methods:{
			//确定回调
			sure(){
				uni.navigateTo({ 
					url:`/pages/HasPayReserve/HasPayReserve?sel=${this.selectData}&&order_id=${this.order_id}`
				})
			},
			//选中体检加项的数据后
			checkboxSel(e){
				this.selectData = e.detail.value;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay_add_container {
		.com_margin {
			margin-top: 20rpx;
		}

		.title {
			font-size: 28rpx;
		}

		// 内容
		.content {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			border-bottom: 1px solid #ccc;
			padding-bottom: 40rpx;
			padding: 30rpx;

			.content_left {
				display: flex;

				.item {
					margin-left: 20rpx;

					.money {
						font-size: 14px;
						@extend .com_margin;

						.old_price {
							margin-left: 20rpx;
							color: #999;
							text-decoration: line-through;
						}
					}
				}

			}

			.content_right {
				.more {
					width: 100%;
					text-align: right;
				}

				.pCount {
					@extend .com_margin;
					font-size: 12px;
					color: #484848;

					.num {
						margin: 0 10rpx;
					}
				}
			}

		}

		// 底部按钮
		.btn_container {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 96rpx;
			display: flex;

			view {
				width:  100%;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
			}

			.passBtn {
				background-color: #f4f6f6;
				font-weight: 650;
				font-size: 18px;
				color: #59B58D;
			}

			.sureBtn {
				background-color: #59b58d;
				font-size: 18px;
				color: #fff;
			}

		}
	}
</style>
